<template>
  <div class="login-container">
    <div class="login-box">
      <div class="box-trans">
        <img src="./logo_index.png" alt>
        <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules">
          <el-form-item prop="mobile">
            <el-input v-model="loginForm.mobile" placeholder="请输入手机号码">
              <i slot="prefix" class="iconfont icon-mobile"></i>
            </el-input>
          </el-form-item>
          <el-form-item prop="code">
            <el-input v-model="loginForm.code" placeholder="请输入校验码">
              <i slot="prefix" class="iconfont icon-yanzhengma"></i>
            </el-input>
          </el-form-item>
          <el-form-item prop="xieyi">
            <el-checkbox v-model="loginForm.xieyi"></el-checkbox>
            <span>我已阅读并同意用户协议和隐私条款</span>
          </el-form-item>
          <el-form-item>
            <el-button style="width:100%;" v-loading="btnLoading" :disabled="btnLoading" type="primary" @click="login()">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
// 对gt.js文件进行导入
// gt.js文件本身没有做导出动作，所以就直接导入即可，此时系统增加一个全局变量，名称为 initGeeTest
import '@/assets/js/gt.js'

// 引入iconfont的css文件
import '@/assets/font/iconfont.css'

export default {
  methods: {
    // 管理员登录系统
    login () {
      // 对整个form表单逐一进行校验，ok才继续
      // console.log(this)
      // this.$refs.loginFormRef // 根据ref属性获得对应的组件的对象，即el-form的组件对象(本质也是一个VueComponent)
      // validate()可以对整个form表单实现校验
      this.$refs.loginFormRef.validate(valid => {
        // valid:true   校验成功
        // valid:false   校验失败
        if (valid) {
          // 判断存在人机交互窗口就直接使用
          if (this.captchaObject !== null) {
            return this.captchaObject.verify()
          }

          // 使得登录按钮变为等待状态
          this.btnLoading = true

          // 实现人机交互验证
          // 1) axios获得极验的验证信息
          var pro = this.$http.get(`/captchas/${this.loginForm.mobile}`)
          pro
            .then((result) => {
              // console.log(result)
              // 接收级验 验证码各项信息,利用对象解构赋值进行
              var { data } = result.data

              // 请检测data的数据结构， 保证data.gt, data.challenge, data.success有值
              window.initGeetest({
                // 以下配置参数来自服务端 SDK
                gt: data.gt,
                challenge: data.challenge,
                offline: !data.success,
                new_captcha: true,
                product: 'bind' // 隐藏长条按钮，直接通过“提交”按钮激活交互页面
              }, captchaObj => {
                // 这里可以调用验证实例 captchaObj 的实例方法
                captchaObj.onReady(() => {
                  // 验证码ready之后才能调用verify方法“显示人机交互验证码”
                  captchaObj.verify() // 显示验证码
                  this.btnLoading = false // 使得按钮恢复状态
                  // 把生成好的人机窗口保存给captchaObject成员
                  this.captchaObject = captchaObj
                }).onSuccess(() => {
                  // 验证成功处理  校验账号，登录系统
                  this.loginAct()
                }).onError(() => {
                  // 验证失败处理
                })
              })
            })
            .catch((err) => {
              console.log(err)
              return this.$message.error('获取极验验证码错误！')
            })

          // 校验账号，登录
          // this.loginAct()
        }
      })
    },
    // 校验账号，登录系统，存储数据
    loginAct () {
      // 账号信息真实校验，具体通过axios带着账号信息跑到服务器端校验
      // axios无论调用什么方法，返回结果都是"Promise对象"，进而then和catch就可以调用
      // 账号校验成功，后端服务器会把当前账号的相关信息都给与返回，我们可以加以利用
      var pro = this.$http.post('/authorizations', this.loginForm)
      pro
        .then((result) => {
          // console.log(result) // 具体有账户的 id  name  photo  token等信息
          // 通过对象解构赋值 把需要信息解析变量
          var { id, name, photo, token } = result.data.data

          // 请在客户端浏览器中记录当前账号的  token、name、photo，表明当前用户处于登录状态
          window.sessionStorage.setItem('id', id)
          window.sessionStorage.setItem('name', name)
          window.sessionStorage.setItem('photo', photo)
          window.sessionStorage.setItem('token', token)

          // 账号校验成功，进入后台系统
          this.$router.push({ name: 'home' })
        })
        .catch((err) => {
          console.log(1111111, err)
        })
    }
  },
  // 注意：属性绑定、双向数据绑定的值需要通过data做支持
  data () {
    // 实现手机号码自定义校验逻辑
    var checkMobile = (rule, value, callback) => {
      // value: 被校验的手机号码数据
      // callback: 回调函数，无论校验成功与否，都需要执行
      // 手机号码规则：11位、1开始、数字的、第2位是3|4|5|6|7|8|9
      var reg = /^1[3-9]\d{9}$/
      // 校验
      if (!reg.test(value)) {
        // 失败
        return callback(new Error('手机号码格式不正确'))
      }
      callback()
    }
    var checkXieyi = (rule, value, callback) => {
      // value: true/false
      if (Number(value) === 0) {
        return callback(new Error('请遵守协议！'))
      }
      callback()
    }
    return {
      // 存储生成好的人机交互窗口对象
      captchaObject: null,
      // 控制登录按钮禁用和显示等待效果
      btnLoading: false,
      loginForm: {
        mobile: '13844145535', // 手机号码
        code: '246810', // 校验码
        xieyi: true // 协议
      },
      // 给form表单域制作校验规则
      loginFormRules: {
        // 被校验项目的名称(要求与表单域名称一致)
        mobile: [
          { required: true, message: '手机号码必填', trigger: 'blur' },
          // 自定义校验手机号码详细规则
          { validator: checkMobile, trigger: 'blur' }
        ],
        code: [
          { required: true, message: '校验码必填', trigger: 'blur' }
        ],
        xieyi: [
          { validator: checkXieyi }
        ]
      }
    }
  }
}
</script>

<style lang="less" scoped>
.login-container {
  height: 100%;
  background-color: gray;
  background-image:url('./login_bg.jpg');
  background-size:cover;
  display: flex;
  justify-content: center;
  align-items: center;
  .login-box {
    width: 410px;
    height: 345px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    .box-trans{
      width:75%;
      text-align:center;
      img{
        width:60%;
        margin:20px 0;
      }
    }

    .el-form {
      width: 100%;
    }
  }
}
</style>
